<template>
  <div class="top_wai">
    <div class="top">
      <div class="log fl">
        <a href="index.html"><img src="../assets/head/logo.png" /></a>
      </div>
      <div class="seat fl">
        <i class="el-icon-location-outline" style="color:#e4004f"></i>
        <span>成都</span>
      </div>
      <div class="navigation">
        <ul>
          <li><a href="index.html">首页</a></li>
          <li class="space"></li>
          <li><router-link to="/category">蛋糕</router-link></li>
          <li class="space"></li>
          <li><a href="#">电子卡券</a></li>
          <li class="space"></li>
          <li><a href="#">全国邮寄</a></li>
          <li class="space"></li>
          <li><a href="#">同城配送范围</a></li>
          <li class="space"></li>
          <li><a href="#">会员中心</a></li>
          <li class="space"></li>
          <li><a href="#">积分换礼</a></li>
          <li class="space"></li>
          <li><a href="#">企业服务</a></li>
        </ul>
      </div>
      <div class="top_right">
        <span>订购热线 4001-170-170</span>
        <div v-if="this.$store.state.isLogin == 0" class="user">
          <ul>
            <li class="fl"><router-link to="/login">登录</router-link></li>
            <li class="fl"><router-link to="/register">注册</router-link></li>
          </ul>
        </div>
        <div v-else class="user">
          <span>欢迎用户: {{ this.$store.state.user.uname }}</span>
          <span @click="quit()">退出</span>
        </div>

        <div class="gouwuche">
          <ul>
            <router-link to="/shopcar">
              <li class="iconfont icon-gouwuche fl"></li>
              <li class="fl number">
                {{ this.$store.state.count }}
              </li>
            </router-link>
          </ul>
        </div>


           <!-- 中部搜索框 -->
    <div class="top_search">
             <input type="text" v-model="word" placeholder="请输入你要搜索的蛋糕............" >
             <button @click="search">
               <i class="el-icon-search"></i>
             </button>
     </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
data(){
  return{
    word:''
  }
},


  methods: {
 
    search(){
      let search_word=this.word
      this.axios.get(`./product/search?keyword=${search_word}`).then(res=>{
          // console.log(res)
       if(res.data.length==0){
         alert('抱歉！没有搜索到该蛋糕')
         return
       }else{
            this.$store.commit("setlist", res.data);
            this.$router.push('./searchlist')
       }
         
      })
    },
    quit() {
      sessionStorage.clear();
      this.$router.go(0);
    },
    // find(){
    //   // let search_word=this.word
    //   //   this.axios.get(`/product/search?keyword=${search_word}`).then(
    //   //   (res)=>{
    //   //     console.log(res)
    //   //   }
    //   // )
    
    // }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.el-button{
  border-radius: 0;
}
.top_search input{
  border: 1px solid #e4004f;
  width: 500px;
  height: 20px;
}
.top_search button{
  width:50px ;
  height: 22px;
  text-align: center;
  margin-left: 30px;
  position: absolute;
  top: 1px;
  left: 425px;
  background-color: pink;
  border: 1px solid pink;
}

.top_search{
  width:500px;height:30px;margin-left:70px;
  position: absolute;
  right: 478px;
  top: 57px;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.top_wai {
  width: 100%;
  height: 96px;
  background-color: #fff;
  border-bottom: 1px solid #bcbcbc;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.top {
  width: 1170px;
  height: 91px;
  margin: 0 auto;
  padding: 5px 5px 0 5px;
  position: relative;
}
.log {
  height: 57px;
  margin: 7px 25px 0 0;
}
.seat {
  width: 42px;
  height: 25px;
  background: url(/images/head/seat.png) no-repeat;
  margin-top: 30px;
  padding: 0 0 0 15px;
  line-height: 12px;
}
.navigation {
  width: 680px;
  height: 17px;
  float: left;
  margin: 30px 0 0 12px;
  line-height: 17px;
}
.navigation li {
  float: left;
}
.navigation a {
  color: #757575;
}
.navigation a:hover {
  color: #000;
}
.space {
  width: 1px;
  height: 15px;
  background: #666;
  margin: 2px 10.5px;
}
.top_right {
  width: 155px;
  height: 65px;
  float: right;
  padding: 31px 0 0 0;
  color: #bcbcbc;
  position: relative;
}

.user {
  width: 165px;
  height: 12px;
}

.gouwuche {
  width: 75px;
  height: 16px;
  position: absolute;
  top: 45px;
  left: 130px;
}
.number {
  line-height: 40px;
}
.user {
  margin: 1px -10px;
}
.user li a {
  color: #e4004f;
  font-size: 12px;
  margin-left: 10px;
}
.user span {
  color: #e4004f;
  font-size: 12px;
  margin-right: 10px;
}
.user span:nth-child(2) {
  cursor: pointer;
}
</style>
